<template>
    <section class="collect_wen_jian_form">
  		<el-form ref="form" :model="wenjianForm" label-width="106px" class="second_form">
			<el-form-item :label="compunteLabel" required >
				<el-radio-group v-model="wenjianForm.wenjianType" @change="changewenjianType">
					<el-radio-button class="box-radio" label="FTP"></el-radio-button>
					<el-radio-button class="box-radio" label="文件目录"></el-radio-button>
				</el-radio-group>
			</el-form-item>
 				
			<el-form-item label="FTP数据源" required v-show="showWenjianType==='FTP'">
				<el-select filterable  v-model="form.connDatasourceId"  placeholder="请选择">
				<el-option
					v-for="item in FTPData"
					:key="item.id"
					:label="item.name"
					:value="item.id">
				</el-option>
				</el-select>
				<i class="el-icon-circle-plus-outline icon_diy"  @click="addDataOragin"></i>
			</el-form-item>
 					
			<el-form-item label="文件目录">
				<el-input v-model="form.filePath" placeholder="100字以内"></el-input>
			</el-form-item>
					
			<el-form-item label="指定文件" required  v-if="inputOrOutput==='laiyuan'">
				<el-radio class="first_radio" v-model="wenjianForm.specifyFileType" label="1" @change="zhidingWj='1'">指定文件类别</el-radio>
				<el-radio class="first_radio" v-model="wenjianForm.specifyFileType" label="2" @change="zhidingWj='2'">指定文件名</el-radio>
			
				<el-input v-show="zhidingWj==='1'" v-model="wenjianForm.specifyValue" placeholder="输入要采集文件的通配规则"></el-input>
				<el-input v-show="zhidingWj==='2'" v-model="wenjianForm.specifyValue" placeholder=" 输入要采集文件名"></el-input>
			</el-form-item>
					
			<el-form-item label="采集方式" required  v-if="inputOrOutput==='laiyuan'">
				<!-- <el-radio class="first_radio" v-model="wenjianForm.gatherMode" label="1">增量采集</el-radio> -->
				<el-radio class="first_radio" v-model="wenjianForm.gatherMode" label="2" >全部采集</el-radio>
			</el-form-item>
			
			<el-form-item label="保存的文件类型 " required  v-if="inputOrOutput==='mudi'">
				<el-radio class="first_radio" v-model="wenjianForm.outFileType" label="csv">CSV文件</el-radio>
				<el-radio class="first_radio" v-model="wenjianForm.outFileType" label="json" >JSON</el-radio>
				<el-radio class="first_radio" v-model="wenjianForm.outFileType" label="xml">XML</el-radio>
				<el-radio class="first_radio" v-model="wenjianForm.outFileType" label="txt" >TXT</el-radio>
			</el-form-item>
					
			<el-form-item label="保存文件命名规则" v-if="inputOrOutput==='mudi'">
				<el-input v-model="form.fileSaveNameRule" placeholder="请输入名称的通配规则"></el-input>
			</el-form-item>
					
			<!--数据匹配表格-->
			<el-form-item label="数据匹配" v-if="inputOrOutput==='laiyuan'"></el-form-item>
			<el-table
				:data="wenjianFormTable1Data"
				style="width: 100%;"
				v-if="inputOrOutput==='laiyuan'"
				>
				<el-table-column
						align="center"
						label="列"
						>
						<template slot-scope="scope">
							<span>第{{ Number(scope.$index)+1}}列</span>
						</template>
				</el-table-column>	
				
				<el-table-column
						align="center"
						label="中文名"
						>
						<template slot-scope="scope">
						<el-input v-model="scope.row.chineseName"></el-input>
						</template>
				</el-table-column>	
			
				<el-table-column
						align="center"
						label="对应的元数据"
						>
						<template slot-scope="scope">
							<el-select v-model="scope.row.yuanData" placeholder="请选择" @change="chooseYuanData" style="width: 160px;">
								<el-option
									v-for="item in wenjianFormYuanDataOptions"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
							<i class="el-icon-circle-plus-outline" @click="addYuanData()" style="width: 10px;font-size: 18px;"></i>
						</template>
				</el-table-column>
				
				<el-table-column
					align="center"
					label=""
					style="width: 50px;"
				>
					<template  style="width: 50px;">
						<span><i class="el-icon-delete" @click="delFormData1"></i></span>
					</template>
				</el-table-column>
			</el-table>
			<el-button  v-if="inputOrOutput==='laiyuan'" type="primary" @click="addWenjianFormTable1Data" style="margin-top: 20px;">添加</el-button>
        </el-form>
        
		<el-dialog
			:title="titleDiy"
			:visible.sync="dialogVisible1"
			width="50%"
			class="diy-dialog"
			:append-to-body=true
			>
			<form-diy @insertData = "insertData" 
				@closeForm="closeForm" 
				:type="dialog1Type" 
				:content="currentPage" 
				:detail="detailData">
			</form-diy>
		</el-dialog>
        
		<el-dialog
			:title="titleDiy"
			:visible.sync="dialogVisible2"
			v-if="dialogVisible2"
			width="50%"
			class="diy-dialog"
			:append-to-body=true
			>
			<form-origin 
				:type="dialog1Type" 
				:content = "currentPage" 
				:formData="formData" 
				:formLabel="formLabel"
				@insertData = "insertDataOrigin"
				@emitSelectWangduan = "emitSelectWangduan"
				@closeForm="closeForm2"
				>
			</form-origin>
		</el-dialog>
    </section>
</template>

<script>
	import formDiy from '@/views/fuwuServer/components/formDiy'
	import formOrigin from '@/views/fuwuServer/components/formOrigin'
    import {
    	componentGetFTPData,
    	componentGetYuanData2Type,
    	computedConnDataAdd,
    	computedAddYuanData
    } from "../../common/js_css_img/serverResourceComputed"
    
    import {
    	componentAddYuanData,
    	componentConnDataAdd,
    	componentGetArea,
    	componentGetType,
    	componentSelectAll,
    } from "@/views/fuwuServer/components/computedFuwuServer"
    export default {
    	components:{
    		formDiy,
    		formOrigin
    	},
    	props:{
    		timeSubmit :Boolean,
    		inputOrOutput:'',
    		resourceWeb:Number,
    		secondFormWenjianForm:{
    			type:Object,
    			default:function () {
    				return {}
    			}
    		},
    		thirdFormWenjianForm:{
    			type:Object,
    			default:function () {
    				return {}
    			}
    		}
    	},
        data() {
          	return {
          	  	formLabel:[
		        	{
		        		show:'normal',
		        		label:'数据原名称',
		        		placehold:'50个字以内',
		        		type:'input',
		        		modelData:"name"
		        	},
		        	{
		        		show:'normal',
		        		label:'所属网段 ',
		        		placehold:'',
		        		type:'select',
		        		options:[],
		        		modelData:'segmentId'
		        	},
		        	{
		        		show:'normal',
		        		label:'所属区域',
		        		placehold:'',
		        		type:'select',
		        		options:[],
		        		modelData:'areaId'
		        	},
		        	{
		        		show:'normal',
		        		label:'类型',
		        		placehold:'',
		        		type:'select',
		        		options:[
		        			{
		        				name:"数据库",
		        				id:3
		        			},
		        			{
		        				name:"ftp",
		        				id:2
		        			}
		        		],
		        		modelData:'typeId'
		        	},
		        	{
		        		show:'db',
		        		label:'数据库类型',
		        		placehold:'',
		        		type:'select',
		        		options:[],
		        		modelData:'libraryTypeId'
		        	},
					{
		        		show:'ftp',
		        		label:'主机IP地址 ',
		        		placehold:'',
		        		type:'input',
		        		modelData:'address'
		        	},
		        	{
		        		show:'ftp',
		        		label:'文件目录',
		        		placehold:'',
		        		type:'input',
		        		modelData:'filePath'
		        	},
		        	{
		        		show:'ftp',
		        		label:'端口号',
		        		placehold:'',
		        		type:'input',
		        		modelData:'port'
		        	},
		        	{
		        		show:'db',
		        		label:'数据库地址',
		        		placehold:'',
		        		type:'input',
		        		modelData:'address'
		        	},
		        	{
		        		show:'db',
		        		label:'数据库名称',
		        		placehold:'',
		        		type:'input',
		        		modelData:'dataBaseName'
		        	},
		        	{
		        		show:'normal',
		        		label:'用户名',
		        		placehold:'数据用户名',
		        		type:'input',
		        		modelData:'username'
		        	},
		        	{
		        		show:'normal',
		        		label:'密码',
		        		placehold:'',
		        		type:'input',
		        		modelData:'password'
		        	},
		        	{
		        		show:'normal',
		        		label:'描述',
		        		placehold:'',
		        		type:'textarea',	
		        		modelData:'describe'
		        	},
		        ],
          		formData:[
		        	{
		        		label:'数据源名称',
		        		value:'',
		        	},
		        	{
		        		label:'类型',
		        		value:'',
		        	},
		        	{
		        		label:'所属区域',
		        		value:'',
		        	},
		        	{
		        		label:'数据库类型',
		        		value:'',
		        	},
		        	{
		        		label:'数据库版本',
		        		value:'',
		        	},
		        	{
		        		label:'数据库地址',
		        		value:'',
		        	},
		        	{
		        		label:'数据库名称',
		        		value:'',
		        	},
		        	{
		        		label:'描述',
		        		value:'',
		        	},
		        	{
		        		label:'测试结果',
		        		value:'',
		        	},
		        ],
          		dataOriginId:'',
          	    detailData:{},
          		currentPage:'yuanData',
          		updataId :0,
          		titleDiy:'',
          		dialog1Type:'',
          		dialogVisible2:false,
          		dialogVisible1:false,
          		zhidingWj:'',
          		showWenjianType:'',
          		wenjianForm:{
          			specifyFileType:'',
          			specifyValue:'',
          			gatherMode:'',
          			outFileType:'',
          		},
				form:{	/*文件这个表单的输入与输出都是这段*/
					"type":2,
					"connDatasourceId":'',
					"filePath":"",
					"fileName":"文件",
					"sql":'',
					"fileSaveNameRule":'',
					"outputDataFormList":[],
					"inputDataFormList":[],
				},
				FTPData:[],
				wenjianFormTable1Data:[],/*输入的*/
				wenjianFormYuanDataOptions:[],
          	};
        },
        methods: {
			delFormData1(scope){
				this.wenjianFormTable1Data.splice(scope.$index,1);
			},
			emitSelectWangduan(val){
				componentGetArea(this,{segment:val});
			},
			insertDataOrigin(val){/*插入到数据库*/
				computedConnDataAdd(this,val);
			},
			addDataOragin(){/*新增数据源*/
				this.dataOriginId = 0;
				this.titleDiy = '新增数据源'
				this.dialog1Type = 'add';
				this.dialogVisible2 = true;
			},
			insertData(param){/*插入元数据,更新元数据*/
				computedAddYuanData(this,param);
			},
			closeForm(){/*关闭弹窗*/
				this.dialogVisible1 = false;
			},
			closeForm2(){/*关闭弹窗2*/
				this.dialogVisible2 = false;
			},
			resetYuanData(){/*更新元数据*/
				if(this.inputOrOutput==='laiyuan'){
					componentGetYuanData2Type(this,{isPageAble: false},1);/*获取采集类的元数据*/
				}else if(this.inputOrOutput==='mudi'){
					this.wenjianFormYuanDataOptions = this.$store.state.collectServer.yuanData;
				}
			},
			addYuanData(){/*新增元数据*/
				this.updataId = 0;
				this.titleDiy = '新增元数据'
				this.dialog1Type = 'add';
				this.dialogVisible1 = true;		
			},
			delFormData1(scope){
				this.wenjianFormTable1Data.splice(scope.$index,1);
			},
			chooseYuanData(val){
				if(this.inputOrOutput==='laiyuan'){
					/*插入到vuex，为下面去领取*/
					let pushYuanData = this.forYuanData(val);
					this.$store.commit('pushYuanData', pushYuanData);
				}
			},
			changewenjianType(val){
				this.showWenjianType =val;
				if(val==='2'){
					componentGetFTPData(this,2,this.resourceWeb);/*ftp数据源*/
				}
			},
			addWenjianFormTable1Data(){
				this.wenjianFormTable1Data.push(
					{
						chineseName:"",
						yuanData:'',
					}
				)
			},
			forYuanData(val){/*循环挑选元数据*/
				let param={};
				for(let i in this.wenjianFormYuanDataOptions){
					if(this.wenjianFormYuanDataOptions[i].id ===val){
						param = this.wenjianFormYuanDataOptions[i];
						break;
					}
				}
				return param
			},
			sortOutputDataFormList(arr){/*为数据匹配排序，更新的时候用*/
				let len = arr.length;
				let minIndex, temp;
				for (var i = 0; i < len - 1; i++) {
					minIndex = i;
					for (var j = i + 1; j < len; j++) {
						if (Number(arr[j].key)<Number(arr[minIndex].key)) {     //寻找最小的数
							minIndex = j;                 //将最小数的索引保存
						}
					}
					temp = arr[i];
					arr[i] = arr[minIndex];
					arr[minIndex] = temp;
				}
				return arr;
			}
        },
        computed:{
        	compunteLabel(){
        		if(this.inputOrOutput==='laiyuan'){
        			return "选择文件类型"
        		}
        		if(this.inputOrOutput==='mudi'){
        			return "文件保存到"
        		}
        	}
        },
        watch:{
        	timeSubmit(newVal){/*处理和提交表单*/
        		if(this.inputOrOutput==='laiyuan'){
        			this.form.outputDataFormList=[];
	        		for (let i in this.wenjianFormTable1Data){
	        			this.form.outputDataFormList.push(
	        				{
	        					"key":Number(i)+1,
	        					"name":this.wenjianFormTable1Data[i].chineseName,
								"metaDataId" :this.wenjianFormTable1Data[i].yuanData,
								"order":i,
	        				}
	        			)
	        		}
        		}
        		this.$emit('outPutForm',{form:this.form,secondForm:this.wenjianForm});
        	},
        	resourceWeb(newVal){
        		componentGetFTPData(this,2,newVal);/*ftp数据源*/
        	},
        	inputOrOutput(newVal){
        		if(newVal==='laiyuan'){
        			componentGetYuanData2Type(this,{isPageAble: false},1);/*获取采集类的元数据*/
        		}else if(newVal==='mudi'){
        			this.wenjianFormYuanDataOptions = this.$store.state.collectServer.yuanData;
        		}
        	},
        	secondFormWenjianForm:{
        		handler(newVal,oldVal){
        			if(newVal.type=="2"){
        				this.wenjianForm.outFileType =String(newVal.outFileType);
	        			this.wenjianForm.gatherMode =String(newVal.gatherMode);
	        			this.wenjianForm.specifyFileType =String(newVal.specifyFileType);
	        			this.zhidingWj = String(newVal.specifyFileType);
	        			this.wenjianForm.specifyValue =String(newVal.specifyValue);
	        			this.form.filePath = newVal.filePath;
	        			this.form.connDatasourceId = newVal.connDatasourceId;
						let outputDataFormList =this.sortOutputDataFormList(newVal.outputDataFormList);
	        			for (let i in outputDataFormList){	
		        			this.wenjianFormTable1Data.push(
		        				{
		          					chineseName:outputDataFormList[i].name,
		          					yuanData:outputDataFormList[i].metaDataId,
		          				}
		        			)
						
		        			
	        			}
        			}
        		},
        		deep:true
        	},
        	thirdFormWenjianForm:{
        		handler(newVal,oldVal){
					if(newVal.type=="2"){
						this.wenjianForm.outFileType = newVal.outFileType;
	        			this.form.fileSaveNameRule = newVal.fileSaveNameRule;
	        			this.form.filePath = newVal.filePath;
	        			this.form.connDatasourceId = newVal.connDatasourceId;
					}
        			
        		},
        		deep:true
        	}
        },
        mounted(){
        	if(this.inputOrOutput==='laiyuan'){
        		componentGetYuanData2Type(this,{isPageAble: false},1);/*获取采集类的元数据*/
        	}else if(this.inputOrOutput==='mudi'){
        		this.wenjianFormYuanDataOptions = this.$store.state.collectServer.yuanData;
        	}
        	componentSelectAll(this);/*获取网段*/
			componentGetType(this, "db_type");/*获取数据库类型*/
        }
  };
</script>

<style scoped="scoped">
    
</style>